{% extends 'AcmeDemoBundle::layoutMyMemory.html.twig.twig' %}

{% block content %}

<div id="templatemo_header">
    <div id="site_title"><h1><a href="http://www.templatemo.com" title="Free Website Template">My Memory</a></h1></div>
</div>
<div id="templatemo_main">
    <div id="content">

        <!-- Home -->
		<div id="home" class="section">
			<div id="home_about" class="box">
           	    <h2>Welcome
           	        {% if app.session.get('user_name') %}
           	            <span style="font-size: small;">{{ app.session.get('user_name') }}</span>
           	        {% endif %}
           	    </h2>
                <p>Love is something made me happy with my sweet memories. I want to share all thing about mines to everyone. In my mind, just me and her in this world.</p>
                <p>This our private website, so you can post our best pictures, chating, and listenning music in this. Do you like it? If you like, please give me a kiss. Baby</p>
            </div>
            <div id="home_gallery" class="box no_mr">
                {% for aryData in aryNewImageList  %}
                    {% if (loop.index == 3 or loop.index == 6) %}
                        <a class="no_mr" href="{{ asset(aryData['image_path'] ~ aryData['name']) }}" rel="lightbox[gallery]"><img src="{{ asset(aryData['image_path'] ~ 'mini/' ~ aryData['name']) }}" alt="{{ aryData['name'] }}" /></a>
                    {% else %}
                        <a href="{{ asset(aryData['image_path'] ~ aryData['name']) }}" rel="lightbox[gallery]"><img src="{{ asset(aryData['image_path'] ~ 'mini/' ~ aryData['name']) }}" alt="{{ aryData['name'] }}" /></a>
                    {% endif %}
                {% endfor %}
            </div>

            <div class="box home_box1 color1">
            	<a href="#album"><img src="{{ asset('bundles/my_memory/images/album.jpg') }}" alt="Album" /></a>
            </div>

            <div class="box home_box1 color2">
	            <a href="#chat"><img src="{{ asset('bundles/my_memory/images/chatting.jpg') }}" alt="Chatting" /></a>
            </div>

            <div class="box home_box2 color3">

            </div>

            <div class="box home_box1 color4 no_mr">
            	<a href="#upload"><img src="{{ asset('bundles/my_memory/images/upload.jpg') }}" alt="Upload" /></a>
            </div>

        </div> <!-- END of home -->

        <!-- Album -->
        <div class="section section_with_padding" id="album">
            <h2>Album</h2>
            <div class="img_border img_fl">
                <img src="{{ asset('bundles/my_memory/images/templatemo_image_03.jpg') }}" alt="image" />
            </div>
            <div class="half right">
                <ul class="list_bullet">
                    <li>Maecenas ac odio ipsum donec cursus</li>
                    <li>Fusce risus tortor, interdum</li>
                    <li>Proin facilisis ullamcorper</li>
                    <li>Sed vel justo quis ligula</li>
                    <li>Ut tristique sagittis arcu</li>
                    <li>Maecenas ac odio ipsum donec cursus</li>
                    <li>Fusce risus tortor, interdum</li>
                 </ul>
            </div>
            <div class="clear h40"></div>
            <div class="img_border img_fr">
                <img src="{{ asset('bundles/my_memory/images/templatemo_image_04.jpg') }}" alt="image" />
            </div>
			<div class="half left">
            	<p><em>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mauris ipsum, pulvinar sit amet varius at, placerat ut felis.</em></p>
            	<p>Donec vitae tortor non ipsum tristique condimentum ac ac nulla. Etiam sagittis iaculis dolor ut euismod. Nam faucibus, risus at consequat malesuada, urna turpis sagittis libero, sodales hendrerit dui arcu et nisi. Praesent pulvinar, dolor id lacinia pulvinar, mi ligula tempor libero, et semper sem dolor et elit. </p>
            </div>

            <a href="#home" class="slider_nav_btn home_btn">home</a>
            <a href="#home" class="slider_nav_btn previous_btn">Previous</a>
            <a href="#chat" class="slider_nav_btn next_btn">Next</a>

        </div>

        <!-- Chat -->
        <div class="section section_with_padding" id="chat">
            <h2>Chat</h2>
            <form id="frmChat" name="frmChat" method="post" action="{{ path('_send_message') }}" >
                <div id="divChatList" style="height: 300px; border: 1px solid; overflow: -moz-scrollbars-vertical">
                    {% if aryChatList is defined %}
                        {% for aryData in aryChatList  %}
                            <p>{{ aryData['message'] }}</p>
                        {% endfor %}
                    {% endif %}
                </div>
                <br/>
                <div>
                    <input type="text" id="txtSendMsg" name="txtSendMsg" style="width: 100%; height: 50px;"></input>
                    <br/>
                    <input type="button" id="btnSubmit" name="btnSubmit" onclick="onSubmitChat()" value="Send" style="float: right" />
                    <input type="hidden" id="hidOldCountMsg" value=""></input>
                </div>
            </form>

            <a href="#home" class="slider_nav_btn home_btn">home</a>
            <a href="#album" class="slider_nav_btn previous_btn">Previous</a>
            <a href="#upload" class="slider_nav_btn next_btn">Next</a>
        </div>

        <!-- Upload -->
        <div class="section section_with_padding" id="upload">
            <h2>Upload</h2>
            <form id="frmImage" name="frmImage" method="post" action="{{ path('_upload_file') }}" enctype="multipart/form-data"  >
                <div class="half left">
                    <a href="#" onclick="showPanel(true)">
                        <div class="box home_box2 color3">
                            <div id="social_links" style="margin-top: 22px">
                                <span style="font-size: 30px;text-decoration: none; color: white">Create Album</span>
                            </div>
                        </div>
                    </a>

                    <a href="#" onclick="showPanel(false)">
                        <div class="box home_box2 color4">
                            <div id="social_links" style="margin-top: 22px">
                                <span style="font-size: 30px;text-decoration: none; color: white">Image</span>
                            </div>
                        </div>
                    </a>

                </div>

                <div class="half right">
                    <p>Choose a option Create Album or Image to upload your beautiful images</p>
                    <div id="divAlbum" style="display: none">
                        Title<br/>
                        <input type="text" id="txtTitle" name="txtTitle" value="" style="width: 100%" />
                        <br/><br/><br/>
                        <div id="divUploadList" >
                            <div id="divFile_0">
                                <input type="file" id="fileUpload_0" name="fileUpload_0" onchange=""></input>
                                <a id="linkAdd_0" href="#" onclick="addFile()">Add</a>
                                <br/><span>Note</span><br/>
                                <input type="text" id="txtNote_0" name="txtNote_0" value="" style="width: 95%" />
                            </div>
                        </div>
                        <br/><br/>
                        <input type="button" id="btnSubmit" name="btnSubmit" onclick="onSubmitUpload()" value="Upload" style="float: right" />
                    </div>

                    <div id="divImage" style="display: none">
                        <input type="file" id="fileUpload" name="fileUpload" onchange=""></input>
                        <br/><span>Note</span><br/>
                        <input type="text" id="txtNote" name="txtNote" value="" style="width: 100%" />
                        <br/><br/>
                        <input type="button" id="btnSubmit" name="btnSubmit" onclick="onSubmitUpload()" value="Upload" style="float: right" />
                    </div>
                    <input type="hidden" id="hidUploadCount" name="hidUploadCount" value="0" />
                    <input type="hidden" id="hidIsAlbum" name="hidIsAlbum" value="" />

                </div>
            </form>
			<a href="#home" class="slider_nav_btn home_btn">home</a>
            <a href="#chat" class="slider_nav_btn previous_btn">Previous</a>

        </div>


    </div>
</div>
</div>
<div id="templatemo_footer">
    <a class="templatemo_footer_icon" href="http://tr.onlyimage.com/" title="Ücretsiz resim arama"  target="_blank"><img src="{{ asset('bundles/my_memory/images/templatemo_footer_icon.png') }}" alt="Ücretsiz resim arama" title="Ücretsiz resim arama" /></a>Copyright © 2014 <a href="#">My demo</a> | <a href="http://www.templatemo.com/preview/templatemo_363_metro">Metro</a> by <a href="http://www.templatemo.com" target="_parent" title="free templates">thuongdpt</a>
</div>


<script type='text/javascript' src='{{ asset('bundles/my_memory/js/logging.js') }}'></script>

<script type="text/javascript">

    $('#hidUploadCount').val(0);
    $('#divAlbum').hide();
    $('#divImage').hide();
    $('#hidIsAlbum').val(false);
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', "{{ asset('bundles/my_memory/sound/faint-beep.mp3') }}");
    audioElement.setAttribute('autoplay', 'autoplay');

    function onSubmitUpload() {
        var frm = $('#frmImage');
    	frm.action = "{{ path('_upload_file') }}";
    	frm.submit();
    }

    function onSubmitChat() {
    	var frm = $('#frmChat');
    	frm.submit();

    }

    // set time to get message
    $(document).ready (function () {
        var updater = setInterval (function () {
            $('#divChatList').load ("{{ path('_get_message') }}");
            if( $('#hidOldCountMsg').val() != $('#hidNewCountMsg').val() ){
            	$('#hidOldCountMsg').val($('#hidNewCountMsg').val());

            	if( $('#hidNewMsgFromPartner').val() == 'true' ){
            		// keep scroll in bottom
                    var objDiv = document.getElementById("divChatList");
                    objDiv.scrollTop = objDiv.scrollHeight;

                    audioElement.play();
                }

            }

        }, 1000);
    });

    $(function(){
	    $("#frmChat").submit(function(e){
	        e.preventDefault();

	        dataString = $("#frmChat").serialize();

	        $.ajax({
    	        type: "POST",
    	        url: "{{ path('_send_message') }}",
    	        data: dataString,
    	        dataType: "text",
    	        beforeSend: function(jqXHR, settings){

    	        },
    	        error: function(jqXHR, textStatus, errorThrown){

    	        },
    	        success: function( data, textStatus, jqXHR) {
    	        	if(data.success){

    	        	}
    	        },
    	        complete: function(jqXHR, textStatus){
    	        	//$('#divChatList').append(formatStrMsg(jqXHR.responseText));
    	            $('#txtSendMsg').val(null);

    	        }
	        });


	    });
	});

	function formatStrMsg(strMsg) {
		var currentdate = new Date();
		var strTime = currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
		strMsg = "<p style='float:left; padding-left:5px'><span style='font-weight:bold;color: aqua'>Oxa: </span>" + strMsg + "</p>";
		strMsg += "<span style='float:right; padding-right:5px'>" + strTime + "</span><br/>";
		return strMsg;
	}

    function uploadFileAjax() {


    	/*
    	var data, xhr;
        data = new FormData();
        data.append( 'fileUpload', $('#fileUpload')[0].files[0] );

        xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xhr.onreadystatechange = function ( response ) {
    	    if(xhr.readyState == 4  && xhr.status == 200) {
    	    	//alert(xhr.responseText);
    	    }
    	};
    	// before send
    	xhr.onprogress = function () {
    	    //alert('before');
    	};
    	// success
    	xhr.onload = function () {
    	    var strFullPath = "{{ image_url }}" + xhr.responseText;
    	    //$('#imgAvatar').attr('src', strFullPath);
    	    //$('#aryUser_hidAvatarPath').val(strFullPath);
    	};

    	//xhr.open( 'post', '<?php echo url_for("@upload_file?target=avatar") ?>', true );
        xhr.send( data );
        */
    }

    function showPanel(isAlbum) {
        if(isAlbum == true) {
            $('#divAlbum').show();
            $('#divImage').hide();
            $('#hidIsAlbum').val(true);
        } else {
        	$('#divAlbum').hide();
        	$('#divImage').show();
        	$('#hidIsAlbum').val(false);
        }

    }

    function addFile() {

    	var index = $('#hidUploadCount').val();
        var nextIndex = parseFloat(index) + 1;

        if(countValidFile() == 2) {
        	var objDivList_ = document.getElementById('divUploadList');
    		objDivList_.setAttribute("style", "overflow: -moz-scrollbars-vertical; height: 200px");
    	}

    	var objFile = document.createElement('input');
    	objFile.setAttribute('type', 'file');
    	objFile.setAttribute('id', 'fileUpload_' + nextIndex);
    	objFile.setAttribute('name', 'fileUpload_' + nextIndex);

    	var objLink = document.createElement('a');
    	objLink.setAttribute('href', '#');
    	objLink.setAttribute('id', 'linkAdd_' + nextIndex);
    	objLink.setAttribute('name', 'linkAdd_' + nextIndex);
    	objLink.innerHTML = "Add";
    	objLink.setAttribute('onclick', 'addFile()');

    	var objNote = document.createElement('input');
    	objNote.setAttribute('type', 'text');
    	objNote.setAttribute('id', 'txtNote_' + nextIndex);
    	objNote.setAttribute('name', 'txtNote_' + nextIndex);
    	objNote.setAttribute('style', 'width: 95%');

    	var objSpan = document.createElement('span');
    	objSpan.innerHTML = "Note";

    	var objDiv = document.createElement('div');
    	objDiv.setAttribute('id', 'divFile_' + nextIndex);
    	objDiv.appendChild(document.createElement('br'));
    	objDiv.appendChild(objFile);
		objDiv.appendChild(objLink);
		objDiv.appendChild(document.createElement('br'));
		objDiv.appendChild(objSpan);
		objDiv.appendChild(document.createElement('br'));
		objDiv.appendChild(objNote);

		var objDivList = $('#divUploadList');
		objDivList.append(objDiv);

		var objOldLink = document.getElementById('linkAdd_' + index);
		objOldLink.innerHTML = "Remove";
		objOldLink.setAttribute("onclick", "removeFile("+index+")");

		$('#hidUploadCount').val(parseFloat(index) + 1);

    }

    function removeFile(i) {
      $('#divFile_' + i).hide();

      if(countValidFile() <= 2) {
    	  var objDivList_ = document.getElementById('divUploadList');
          objDivList_.setAttribute("style", "");
      }


    }

    function countValidFile() {
    	var count = 0;
    	for(var i = 0; i <= $('#hidUploadCount').val(); i++) {
      	    if($('#divFile_' + i).is(':visible')) {
      	    	count++;
          	}
        }
        return count;

    }



</script>

{% endblock %}


